<template>
  <div class="score-analysis">
    <div class="score-wrap">
      <div class="analysis-head clearfix p15">
        <div class="analysis-title">
          <p>论述类文本阅读</p>
        </div>
        <div class="analysis-problem">答对8题/<small>共12题</small></div>
      </div>
      <div class="analysis-body">
        <div class="analysis-myscore">40<small>我的得分</small></div>
        <div class="analysis-totalscore">60<small>总分数</small></div>
        <div class="analysis-probability"><span>67<span class="percent">%</span></span><small>得分率</small></div>
      </div>
    </div>
  </div>
</template>

<script>
  // import HeaderComponent from '@/components/header.vue'
  export default {
    data () {
      return {}
    },
    components: {
      // HeaderComponent
    },
    props: {
      name: {
        type: String
      },
      score: {
        type: Number
      },
      totalScore: {
        type: Number
      },
      probability: {
        type: Number
      },
      totalproblem: {
        type: Number
      },
      correctproblem: {
        type: Number
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  @import '../assets/less/_mixins-wln.less';
  .score-analysis{
    padding-bottom: 15px;
    background-color: #fff;
    .score-wrap{
      border:1px solid #d8dde1;
      border-radius: 5px;
      .analysis-head{
        background-color: #f4f5f7;
        border-radius: 5px 5px 0 0;
        .analysis-title{
          font-size: 14px;
          color: #4c555c;
          float: left;
        }
        .analysis-problem{
          float:right;
          color: #9299a1;
          font-size: 12px;
          line-height: 14px;
          small{
            font-size:10px;
          }
        }
      }
      .analysis-body{
        display: flex;
        padding: 20px 0;
        border-radius:  0 0 5px 5px;
        background-color: #fff;
        justify-content: space-around;
        .analysis-myscore,.analysis-totalscore,.analysis-probability{
          display: flex;
          flex-direction: column;
          align-items: center;
          color: @grey;
          font-size: 20px;
          margin-bottom: 5px;
          small{
            margin-top: 10px;
            font-size: 12px;
            color: #959aa0;
          }
        }
        .analysis-probability{
          color: @primary;
          .percent{
            font-size: 10px;
          }
        }
      }
    }
  }
</style>
